<template>
  <el-drawer
    v-model="visible"
    title="采购详情"
    size="1600px"
    :destroy-on-close="true"
  >
    <template #header>
      <div class="drawer-header">
        <h3 class="text-bold">{{info?.purchaseName}}</h3>
        <div class="header-tags">
          <el-tag size="large" v-if="info&&info.purchaseType">{{ $dictUtils.getDictLabel("purchase_type", info.purchaseType, '-') }}</el-tag>
          <el-tag size="large" type="info" v-if="info&&info.executeDepartment&&info.executeDepartment.name">{{info?.executeDepartment.name}}</el-tag>
        </div>
      </div>
    </template>
    
    <div class="drawer-content">
      <!-- 采购概览信息 -->
      <div class="overview-section">
        <div class="overview-item">
          <span class="label">招标(采购)限价(元)</span>
          <span class="value">{{ info?.limitPrice || '00.00' }}</span>
        </div>
        <div class="overview-item">
          <span class="label">合同合计金额</span>
          <span class="value">{{ info?.contractSumAmount || '00.00万元' }}</span>
        </div>
        <div class="overview-item">
          <span class="label">合同数量</span>
          <span class="value">{{ info?.contractCount || '0' }}</span>
        </div>
        <div class="overview-item">
          <span class="label">累计收款金额</span>
          <span class="value">{{ info?.invoiceSumAmount || '0万元' }}</span>
        </div>
        <div class="overview-item">
          <span class="label">累计付款</span>
          <span class="value">{{ info?.paymentSumAmount || '0万元' }}</span>
        </div>
        <div class="overview-item">
          <span class="label">质保金待支付</span>
          <span class="value">{{ info?.qualityGuaranteeFundSum || '0万元' }}</span>
        </div>
        <!-- <div class="overview-item">
          <span class="label">累计费用报销</span>
          <span class="value">{{ info?.expenseReimbursementSum || '0元' }}</span>
        </div> -->
        <div class="overview-item">
          <span class="label">累计支出</span>
          <span class="value">{{ info?.expenditureSum || '0元' }}</span>
        </div>
      </div>

      <!-- 合同签订/费用报销 标签页 -->
      <div class="tabs-section">
        <el-tabs>
          <el-tab-pane label="合同签订">
            <ContractList />
          </el-tab-pane>
      
        </el-tabs>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {computed} from "vue"
import purchaseService from '@/api/purchase/purchaseService'
import PurchaseClaimList from '../claim/PurchaseClaimList'


import ContractList from "../contract/ContractList"
export default {
  name: 'PurchaseDrawer',
  provide() {
    return {
      projectId: computed(() => this.projectId),
      purchaseId: computed(() => this.purchaseId)
    }
  },
  data() {
    return {
      visible: false,
      detailData: {},
      contractList: [], // 合同列表数据
      projectId:"",
      purchaseId:'',
      info:{}
    }
  },
  components:{
    PurchaseClaimList,
    ContractList
  },
  props: {
    projectId: {
      type: String,
      default: ''
    },
    purchaseId: {
      type: String,
      default: ''
    }
  },
  created() {
    // this.projectId = this.$route.query.projectId
    // this.purchaseId = this.$route.query.purchaseId


  },
 
  watch: {    
    // 监听抽屉的显示状态
    // visible: {
    //   handler(newVal) {
    //     if (newVal && this.purchaseId) {
    //       // 当抽屉打开且有 purchaseId 时加载数据
    //       this.loadData(this.purchaseId)
    //     }
    //   }
    // }
  },
  methods: {
    // 打开抽屉并加载数据
    open(val) {
      this.purchaseId=val.id;
      this.projectId=val.projectId;
      this.visible = true
      if (val.id) {
        this.loadData(val.id)
      } else if (this.purchaseId) {
        // 如果没有传入 id 但有 props 中的 purchaseId，使用 props 中的值
        this.loadData(this.purchaseId)
      }
    },
    
    // 关闭抽屉
    closeDrawer() {
      this.visible = false
      this.detailData = {}
      this.contractList = []
    },
    
    // 加载详情数据
    loadData(id) {
      purchaseService.queryById(id).then(data => {
        this.detailData = data
        // 加载合同列表数据
        this.loadContractList(id)
      }).catch(() => {
        this.$message.error('获取详情失败')
        this.closeDrawer()
      })
    },
    loadContractList(purchaseId) {
      // 这里添加获取合同列表的接口调用
      purchaseService.countById({id:purchaseId}).then(data => {
 
        this.info = data
      })
     
    }
  }
}
</script>

<style lang="scss" scoped>
.none-sizing{
  padding: 0;
  margin: 0;
}
.drawer-header {
  padding: 20px;
  
  h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 500;
  }
  
  .header-tags {
    display: flex;
    align-items: center;
    .el-tag {
      margin-right: 10px;
      margin-bottom: 0;
      margin-top: 10px;
    }
  }
}

.drawer-content {
  padding: 15px 10px;
  
  .overview-section {
    display: flex;
    // grid-template-columns: repeat(8, 1fr);
    gap: 15px;
    padding: 20px 10px;
    background: #F5F7FA;
    border-radius: 4px;
    margin-bottom: 20px;
    
    .overview-item {
      padding-left: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      border-left: 1px solid rgba(165, 182, 208, .6);
      &:first-child{
        border: none;
        flex: 1.8;
      }
      .label {
        font-size: 14px;
        color: #5D7AAB;
        margin-bottom: 4px;
      }
      
      .value {
        font-size: 18px;
        color: #333;
        font-weight: 500;
        font-weight: 800;
      }
    }
  }
  
  .tabs-section {
    .table-actions {
      margin-bottom: 15px;
    }
    
    :deep(.el-table) {
      th {
        background-color: #F5F7FA;
        color: #606266;
      }
    }
  }
}



</style>
<style>
.el-drawer__close.el-icon{
  width: 30px;
  height: 30px;
}
.el-drawer__close.el-icon svg{
  width: 3em!important;
  height: 3em!important;
}
</style>
